<%@ taglib uri="/WEB-INF/struts-html" prefix="html" %>

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<html:html>
<head>
	<title></title>
	
	<script type="text/javascript" src="<%= request.getContextPath() %>/common/js/addremove/jquery-latest.pack.js"></script>
	<script type="text/javascript" src="<%= request.getContextPath() %>/common/js/addremove/jquery.highlightFade.js"></script>
	
	<script type="text/javascript">
	function addFormField() {
		var id = document.getElementById("id").value;
		var newElement = "<p id='row" + id + "'>"+
							 "<label for='txt" + id + "'>Field " + id + 
							 "&nbsp;&nbsp;<input type='text' size='20' name='txt[]' id='txt" + id + "'>"+
							 "&nbsp;&nbsp<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>";
		$("#divTxt").append(newElement);
		
		
		$('#row' + id).highlightFade({
			speed:2000
		});
		
		id = (id - 1) + 2;
		document.getElementById("id").value = id;
	}

	function removeFormField(id) {
		$(id).remove();
	}
	</script>	
</head>
<body>

    
	<p><a href="#" onClick="addFormField(); return false;">Add</a></p>
	
	<form action="#" method="get" id="form1">
		<input type="hidden" id="id" value="1">
		<div id="divTxt"></div>
		<p>
			<input type="submit" value="Submit" name="submit">
			<input type="reset" value="Reset" name="reset">
		</p>
	</form>    
    
</body>
</html:html>
